<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input id="log" type="text" />
    <button id="submit"> 提交</button>
    <div id="status">

    </div>
    <ul>


    </ul>

    <script src="/libs/zepto/zepto.js"></script>
    <script src="/libs/zepto/event.js"></script>
    <script src="/libs/zepto/touch.js"></script>
    <script>

        // console.log(window.location.search, 'window.location');

        // var searchstr = window.location.search;
        // "?id=1,log=www.24os.cn"

        // var searchArr = searchstr.split("?")[1].split("&");
        // var obj = {};

        // obj.id = searchArr[0].split("=")[1];
        // obj.log = searchArr[1].split("=")[1];

        // console.log(obj, 'obj');

        var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id integer primary key AutoIncrement,log)');
            // tx.executeSql('INSERT INTO LOGS (log)  VALUES ("菜鸟教程")');
            // console.log(0);
            // tx.executeSql('INSERT INTO LOGS (log) VALUES ("www\.runoob\.com")');
            // console.log(1);
            // tx.executeSql(`INSERT INTO LOGS (log) VALUES (${obj.log})`);

        });

        getData();

        // console.log(document.querySelector('button')

        $('ul').on("click", "#delete", function (e) {
            console.log(e.currentTarget.dataset.id, '<---e');

            db.transaction(function (tx) {
                console.log(4);
                console.log(`DELETE FROM LOGS  WHERE id=${parseInt(e.currentTarget.dataset.id, 10)}`);
                tx.executeSql(`DELETE FROM LOGS  WHERE id=${parseInt(e.currentTarget.dataset.id, 10)}`);
                console.log(5);

                getData();
            });


        });


        $('ul').on("click", "#edit", function (e) {
            console.log(e.currentTarget.dataset.id, '<---edit id');

            console.log(e.currentTarget);
            db.transaction(function (tx) {
                console.log(7);
                tx.executeSql(`UPDATE LOGS SET log='${e.currentTarget.nextElementSibling.value}' WHERE id=${parseInt(e.currentTarget.dataset.id, 10)}`);
                console.log(8);

                getData();

            });


        });


        $('#submit').on('click', function () {

            db.transaction(function (tx) {

                tx.executeSql(`INSERT INTO LOGS (log)  VALUES ("${$('#log').val()}")`);

                getData();

              

            });
        })

        function getData() {
            var html = '';
            db.transaction(function (tx) {
                $('ul').html('');
                tx.executeSql('SELECT * FROM LOGS order by id desc', [], function (tx, results) {
                    var len = results.rows.length, i;
                    msg = "<p>查询记录条数: " + len + "</p>";
                    $('#status').html(msg);

                    for (i = 0; i < len; i++) {
                        // alert(results.rows.item(i).log );
                        html += `<li>
                        ${results.rows.item(i).id}---${results.rows.item(i).log}
                        <button id="delete" data-id=${results.rows.item(i).id}>删除</button> <button id="edit" data-id=${results.rows.item(i).id}>修改</button><input id="editInput" type="text" /></li>`;
                    }

                    document.querySelector('ul').innerHTML = html;


                });


            });
        }



    </script>
</body>

</html>